/**
  校际交流项目 - 查看
*/
<template>
    <div class="topic-info" style="width:100%;">
        <div class="project-application-container" style="height: 30px;">
            <el-breadcrumb style="float: left;" separator="/">
                <el-breadcrumb-item
                    :to="{ path: '/InterSchoolComAuditList' }"
                    v-if="pageFrom === 'audit'"
                >
                    <span @click="returnList">校际交流院级项目审核</span>
                </el-breadcrumb-item>
                <el-breadcrumb-item :to="{ path: '/InterSchoolComAppList' }" v-else>
                    <span @click="returnList">校际交流院级项目申请</span>
                </el-breadcrumb-item>
                <el-breadcrumb-item>
                    <span>查看</span>
                </el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <el-card>
            <el-button style="float:right" @click="returnList">返回</el-button>
            <span class="top-title">
                <h3 v-if="pageFrom === 'audit'">校际交流院级项目审核-查看</h3>
                <h3 v-else>校际交流院级项目申请-查看</h3>
            </span>
            <hr />
            <el-form
                :model="proForm"
                ref="proForm"
                :rules="baseInfoRules"
                label-position="top"
                label-suffix="："
            >
                <span class="topic-form-title">
                    <h3>个人信息</h3>
                </span>
                <el-row :gutter="24">
                    <el-col :span="6">
                        <el-form-item label="学院" prop="teacherFacultyName">
                            <el-input
                                v-model="proForm.teacherFacultyName"
                                class="topic-input-select"
                                maxlength="32"
                                disabled
                            ></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="工号" prop="teacherId">
                            <el-input
                                v-model="proForm.teacherId"
                                class="topic-input-select"
                                maxlength="32"
                                disabled
                            ></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="姓名" prop="teacherName">
                            <el-input
                                v-model="proForm.teacherName"
                                class="topic-input-select"
                                maxlength="32"
                                disabled
                            ></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="职称" prop="teacherTitleName">
                            <el-input
                                v-model="proForm.teacherTitleName"
                                class="topic-input-select"
                                maxlength="32"
                                disabled
                            ></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row :gutter="24">
                    <el-col :span="6">
                        <el-form-item label="手机号码" prop="teacherPhone">
                            <el-input
                                v-model="proForm.teacherPhone"
                                class="topic-input-select"
                                maxlength="32"
                                disabled
                            ></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="电子邮件地址" prop="teacherEmail">
                            <el-tooltip
                                class="item"
                                effect="light"
                                :content="proForm.teacherEmail"
                                placement="top"
                                :disabled="showTip"
                            >
                                <el-input
                                    v-model="proForm.teacherEmail"
                                    class="topic-input-select"
                                    maxlength="320"
                                    disabled
                                ></el-input>
                            </el-tooltip>
                        </el-form-item>
                    </el-col>
                </el-row>

                <span class="topic-form-title">
                    <h3>申请项目情况</h3>
                </span>
                <el-row :gutter="24">
                    <el-col :span="6">
                        <el-form-item label="培养层次" prop="teacherLevel">
                            <el-input
                                v-model="proForm.teacherLevel"
                                class="topic-input-select"
                                maxlength="32"
                                disabled
                            ></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="18">
                        <el-form-item label="项目名称" prop="projectName">
                            <el-input
                                v-model="proForm.projectName"
                                class="topic-input-select"
                                maxlength="32"
                                disabled
                            ></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row :gutter="24">
                    <el-col :span="12">
                        <el-form-item label="合作大学（模糊查询）" prop="projectCollegeCn">
                            <el-input
                                v-model="proForm.projectCollegeCn"
                                class="topic-input-select"
                                maxlength="32"
                                disabled
                            ></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="合作大学英文名称（模糊查询）" prop="projectCollegeEn">
                            <el-input
                                v-model="proForm.projectCollegeEn"
                                class="topic-input-select"
                                maxlength="32"
                                disabled
                            ></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row :gutter="24">
                    <el-col :span="6">
                        <el-form-item label="国际/地区" prop="projectNationName">
                            <el-input
                                v-model="proForm.projectNationName"
                                class="topic-input-select"
                                maxlength="32"
                                disabled
                            ></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="留学内容" prop="projectStudyAbroadContent">
                            <el-input
                                v-model="proForm.projectStudyAbroadContent"
                                class="topic-input-select"
                                maxlength="32"
                                disabled
                            ></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="项目开始时间" prop="projectStartTime">
                            <el-date-picker
                                v-model="proForm.projectStartTime"
                                type="date"
                                class="topic-input-select"
                                value-format="yyyy-MM-dd HH:mm:ss"
                                disabled
                            ></el-date-picker>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="项目结束时间" prop="projectEndTime">
                            <el-date-picker
                                v-model="proForm.projectEndTime"
                                type="date"
                                class="topic-input-select"
                                value-format="yyyy-MM-dd HH:mm:ss"
                                :picker-options="endDatePicker"
                                disabled
                            ></el-date-picker>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row :gutter="24">
                    <el-col :span="6">
                        <el-form-item label="每年中方留学生名额" prop="projectInlandNumber">
                            <el-input
                                v-model="proForm.projectInlandNumber"
                                class="topic-input-select"
                                maxlength="32"
                                disabled
                            ></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="每年外方留学生名额" prop="projectOutlandNumber">
                            <el-input
                                v-model="proForm.projectOutlandNumber"
                                class="topic-input-select"
                                maxlength="32"
                                disabled
                            ></el-input>
                        </el-form-item>
                    </el-col>

                    <el-col :span="6">
                        <el-form-item label="项目负责人" prop="projectHeadLable">
                            <el-input
                                v-model="proForm.projectHeadLable"
                                class="topic-input-select"
                                maxlength="32"
                                disabled
                            ></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="项目联系人" prop="projectContactLable">
                            <el-input
                                v-model="proForm.projectContactLable"
                                class="topic-input-select"
                                maxlength="32"
                                disabled
                            ></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="24">
                    <el-col :span="12">
                        <el-form-item label="所涉及学院（可多选）" prop="facultly">
                            <el-input
                                v-model="proForm.facultly"
                                class="topic-input-select"
                                disabled
                                type="textarea"
                                autosize
                            ></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row :gutter="24">
                    <el-col :span="24">
                        <el-form-item label="备注" prop="projectRemark">
                            <el-input
                                v-model="proForm.projectRemark"
                                class="topic-input-select"
                                type="textarea"
                                :rows="6"
                                maxlength="500"
                                show-word-limit
                                disabled
                                placeholder
                            ></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <br />
                <span class="topic-form-title">
                    <h3 style="float: left">附件管理</h3>
                </span>
                <span>
                    （按要求上传协议扫描件）您可以上传图片(jpg、png、jpeg、bmp)，PDF，大小不要超过
                    5MB；
                </span>
                <edu-table
                    :data="uploadFileList"
                    :tooltipEffect="tooltipEffect"
                    stripe
                    :selection="false"
                    :order="false"
                    :pagination="false"
                >
                    <edu-table-column prop label="已上传文件">
                        <template slot-scope="scope">
                            <el-button type="text" @click="downFile(scope.row)">
                                {{ scope.row.fileName }}
                            </el-button>
                        </template>
                    </edu-table-column>
                    <edu-table-column prop="fileExt" label="文件类型"></edu-table-column>
                    <edu-table-column prop="fileTime" label="上传时间"></edu-table-column>
                    <edu-table-column prop="fileSize" label="文件大小"></edu-table-column>
                </edu-table>
            </el-form>
        </el-card>
        <br />
        <el-card>
            <span class="topic-form-title">
                <h3>审批进度</h3>
            </span>
            <edu-table :pagination="false" :data="approveHistory" :selection="false">
                <edu-table-column prop="time" label="时间" align="center">
                    <template slot-scope="scope">
                        {{ scope.row.time | time }}
                    </template>
                </edu-table-column>
                <edu-table-column prop="role" label="角色" align="center"></edu-table-column>
                <edu-table-column
                    prop="approvorName"
                    label="审批人"
                    align="center"
                ></edu-table-column>
                <edu-table-column prop="result" label="审批结果" align="center">
                    <template slot-scope="scope">
                        {{ scope.row.result | result }}
                    </template>
                </edu-table-column>
                <edu-table-column prop="content" label="审批说明" align="center"></edu-table-column>
            </edu-table>
        </el-card>
    </div>
</template>
<script>
import filters from 'common/src/filters'
import InterSchoolComAppApi from 'common/src/api/interSchoolExchange/InterSchoolComApp'
import { downloadfile } from 'common/src/api/upload'
import * as INDEX from 'common/src/utils/index'

export default {
    name: '',
    props: {
        projectId: {
            type: Number,
            default: ''
        },
        pageFrom: {
            type: String,
            default: ''
        }
    },
    data() {
        return {
            uploadFileList: [],
            approveHistory: [],
            showTip: true,
            proForm: {
                teacherId: '',
                teacherName: '',
                teacherFacultyName: '',
                teacherTitleName: '',
                teacherPhone: '',
                teacherEmail: '',
                projectName: '',
                projectCollegeCn: '',
                projectCollegeEn: '',
                projectNationName: '',
                projectStudyAbroadContent: '',
                projectStartTime: '',
                projectEndTime: '',
                projectInlandNumber: '',
                projectOutlandNumber: '',
                projectHeadLable: '',
                projectContactLable: '',
                projectRemark: '',
                teacherLevel: '',
                facultly: ''
            }
        }
    },
    watch: {
        'proForm.teacherEmail': {
            handler(newVal) {
                if (newVal && newVal.length > 20) {
                    this.showTip = false
                } else {
                    this.showTip = true
                }
            },
            deep: true,
            immediate: true
        }
    },
    filters: {
        time(val) {
            return INDEX.parseTime(val, '{y}-{m}-{d}')
        },
        result(val) {
            switch (val) {
                case 'Process':
                    return '通过'
                case 'Reject':
                    return '驳回'
                case 'Recall':
                    return '撤回'
                case 'End':
                    return '通过'
                case 'COMMIT':
                    return '已提交'
                case 'approveNoPass':
                    return '不通过'
                default:
                    return ' '
            }
        }
    },
    created() {
        // this.getTeacherInfo()
        this.getData()
    },
    mounted() {},
    methods: {
        // 返回列表页
        returnList() {
            this.$emit('returnVal', 'list')
        },

        // 获取教师基本信息
        // getTeacherInfo() {
        //     InterSchoolComAppApi.teacherDetail({}).then(res => {

        //     })
        // },

        // 获取详情
        getData() {
            let parm = {
                projectId: this.projectId
            }
            InterSchoolComAppApi.get(parm).then(res => {
                for (let key in this.proForm) {
                    this.proForm[key] = res.data[key]
                }
                res.data.faculties.forEach(fac => {
                    if (this.proForm.facultly) {
                        this.proForm.facultly = this.proForm.facultly + ',' + fac.facultyName
                    } else {
                        this.proForm.facultly = fac.facultyName
                    }
                })
                res.data.trainings.forEach(tra => {
                    if (this.proForm.teacherLevel) {
                        this.proForm.teacherLevel =
                            this.proForm.teacherLevel + ',' + tra.trainingName
                    } else {
                        this.proForm.teacherLevel = tra.trainingName
                    }
                })
                this.uploadFileList = res.data.files
                this.approveHistory = res.data.processes
            })
        },

        downFile(row) {
            downloadfile(row.fileId)
        }
    }
}
</script>
<style lang="scss" scoped>
.topic-info {
    .topic-title {
        color: #2b3b4e;
        font-size: 18px;
        line-height: 24px;
        font-weight: bold;
    }
    .topic-expand {
        color: #3a7fe8;
        font-size: 14px;
        cursor: pointer;
        margin-left: 10px;
    }
    .item {
        margin: 0px;
    }
    .topic-input-select {
        width: 100%;
    }
    .topic-form-title {
        font-weight: bold;
        text-align: left;
        line-height: 60px;
    }
    .top-title {
        font-weight: bold;
        text-align: left;
        line-height: 30px;
    }
}
</style>
